﻿@{
    ViewBag.Title = "C2E2C - 首页";
    Layout = "~/Views/Shared/_LayoutWithMenu.cshtml";
}

<section id="sidebar" class="span-7">
    <div id="login">
        @using (Html.BeginForm("Login", "User"))
        {
            <p>
                <label for="username">
                    Email：</label>@Html.TextBox("username")</p>
            <p>
                <label for="password">
                    密 码：</label>@Html.Password("password")
                <input type="submit" value="登入" /></p>
            <p>
                @Html.ActionLink("注册", "Register", "User")
                @*@Html.ActionLink("忘记密码?", "ForgetPassword", "User", null, new { @class = "modalBox" })*@
                <a class="modalBox" href="@Url.Action("ForgetPassword", "User")#getPassord">忘记密码?</a>
            </p>
        }
        <div id="getPassord" class="hidden" style="width: 380px; margin: 0 auto; background-color: #fff;">
            <div style="padding: 24px 64px;">
                <div class="modalBoxClose">关闭</div>
            </div>
        </div>
    </div>
    <div class="sidebar-item">
        <p>香港交通简介</p>
        <div style="width: 240px; margin: 0 auto;">
            <div id="video" style="display: none; padding: 24px 64px; background-color: #000;">
                <div class="modalBoxClose">关闭</div>
            </div>
            <a id="videoPlay" href="#video">
                <img src="@Url.Content("~/Content/videos/player_preview.jpg")" alt="HK" style="width: 240px;height: 132px;"/></a>
        </div>
    </div>
    <div class="sidebar-item">
        <p>国内外交通案例宝典</p>
        <ul>
            <li><a href="#">国内外交通案例 - 01</a></li>
            <li><a href="#">国内外交通案例 - 02</a></li>
            <li><a href="#">国内外交通案例 - 03</a></li>
            <li><a href="#">国内外交通案例 - 04</a></li>
            <li><a href="#">国内外交通案例 - 05</a></li>
        </ul>
    </div>
</section>
<section id="content" class="span-16">
    <div id="showcase-banner">
        <ul>
            <li>
                <img src="@Url.Content("~/Content/images/HK.jpg")" alt="HK" /></li>
            <li>
                <img src="@Url.Content("~/Content/images/BEIJING.jpg")" alt="BEIJING" /></li>
        </ul>
    </div>
    <hr class="space" />
    <div class="span-16">
        <dl class="span-7">
            <dt>我们的宗旨</dt>
            <dd>
                <ul>
                    <li>借鉴先进经验指导实际需要</li>
                    <li>发挥专才优势实现优势互补</li>
                    <li>针对发展瓶颈提供最佳战略</li>
                    <li>探索发展新理念与新思路</li>
                </ul>
            </dd>
        </dl>
        <dl class="span-7">
            <dt>我们的服务</dt>
            <dd>
                <ul>
                    <li>交通发展战略、项目咨询与技术整合</li>
                    <li>交通专家培训、国内外经典案例库</li>
                    <li>城市综合形象设计与鉴定评估</li>
                    <li>综合经济发展分析与人才引进计划</li>
                </ul>
            </dd>
        </dl>
    </div>
    <div id="events" class="span-15 section-item">
        <p>
            最新动态</p>
        <hr />
        <ul>
            <li><a href="#">最新动态 - 01</a><span class="right">[2012-2-1]</span></li>
            <li><a href="#">最新动态 - 02</a><span class="right">[2012-2-1]</span></li>
            <li><a href="#">最新动态 - 03</a><span class="right">[2012-2-1]</span></li>
            <li><a href="#">最新动态 - 04</a><span class="right">[2012-2-1]</span></li>
            <li><a href="#">最新动态 - 05</a><span class="right">[2012-2-1]</span></li>
        </ul>
    </div>
    <div id="specialEvents" class="span-15 section-item">
        <p>
            金字活动品牌</p>
        <hr />
        <div class="fluent-list">
            <div><a href="#">
                <img src="@Url.Content("~/Content/images/HKITF.jpg")" alt="HKITF" /></a></div>
            <div><a href="#">
                <img src="@Url.Content("~/Content/images/HKITF.jpg")" alt="HKITF" /></a></div>
            <div><a href="#">
                <img src="@Url.Content("~/Content/images/HKITF.jpg")" alt="HKITF" /></a></div>
            <div><a href="#">
                <img src="@Url.Content("~/Content/images/HKITF.jpg")" alt="HKITF" /></a></div>
            <div><a href="#">
                <img src="@Url.Content("~/Content/images/HKITF.jpg")" alt="HKITF" /></a></div>
        </div>
    </div>
</section>
<section id="links" class="span-24">
    <div class="push-1 span-22 section-item">
        <p>
            友情链接</p>
        <hr />
        <div class="link-list">
            <div><a href="#">
                <img src="@Url.Content("~/Content/images/HKITF.jpg")" alt="HKITF" /></a></div>
            <div><a href="#">
                <img src="@Url.Content("~/Content/images/HKITF.jpg")" alt="HKITF" /></a></div>
            <div><a href="#">
                <img src="@Url.Content("~/Content/images/HKITF.jpg")" alt="HKITF" /></a></div>
            <div><a href="#">
                <img src="@Url.Content("~/Content/images/HKITF.jpg")" alt="HKITF" /></a></div>
        </div>
    </div>
</section>


<script src="@Url.Content("~/Scripts/swfobject.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/plugins/modalBox.js")" type="text/javascript"></script>
<script type="text/javascript">
    var flashvars = {
        file: '@Url.Content("~/Content/videos/video.flv")',
        image: '@Url.Content("~/Content/videos/preview.jpg")',
        width: 384,
        height: 288
    };
    var params = {
        menu: false,
        quality: 'medium',
        allowfullscreen: true
    };

    $(document).ready(function () {
        $(".menu > li").hover(function () {
            $(this).addClass("menu-item-hover");
        }, function () {
            $(this).removeClass("menu-item-hover");
        });

        $("#videoPlay").modalBox({
            handlers: {
                onModalBoxShowing: function () {
                    $("#video").append('<div id="videoPlayer">' +
                        '<a href="http://www.macromedia.com/go/getflashplayer">' +
                        '<img src="http://www.macromedia.com/images/shared/download_buttons/get_flash_player.gif"' +
                        ' alt="Get Adobe Flash player" /></a></div>');
                    swfobject.embedSWF(
                        '@Url.Content("~/Content/videos/flvplayer.swf")',
                        'videoPlayer',
                        '384',
                        '288',
                        '9.0.0', false, flashvars, params);
                },
                onModalBoxClosed: function () {
                    swfobject.removeSWF("videoPlayer");
                }
            }
        });

        var start = function () {
            $("#showcase-banner li:first").animate({
                    'margin-left': '-828px' 
                }, 'slow', function () {
                    setTimeout(end, 10 * 1000);
                });
        };
        var end = function () {
            $("#showcase-banner li:first").animate({
                    'margin-left': '0px' 
                }, 'slow', function () {
                    setTimeout(start, 10 * 1000);
                });
        };
        setTimeout(start, 10 * 1000);
    });
</script>
